import * as React from 'react';
import { Table, Image, Space, Button, Switch } from 'antd'
import { IPro } from './pro';
import { updateFlag } from '@/services/pro';
import { connect, ConnectRC } from 'umi'
interface IAppProps {
  dataSource: Array<IPro>,
  type: string,
  dispatch: any,
  match:any,
  location:any,
  history:any,
  route:any
}

const TableList: ConnectRC<IAppProps> = (props) => {
  console.log(props)
  const { dataSource, type } = props
  const [ current, setCurrent ] = React.useState(1)
  const [ pageSize, setPageSize ] = React.useState(10)
  const columns: any = [
    {
      title: '序号',
      fixed: 'left',
      width: 100,
      align: 'center',
      // 注意render 函数返回的是 React的Node节点
      render: (text: any, record: IPro, index: number): React.ReactNode => {
        // 根据页码和每页显示个数计算出 序号
        return <span>{ (current - 1) * pageSize + index + 1 }</span>
      }
    },

    {
      title: '产品名称',
      fixed: 'left',
      width: 150,
      align: 'center',
      dataIndex: 'proname' // 产品对应的字段
    },
    {
      title: '产品图片',
      dataIndex: 'img1',
      fixed: 'left',
      width: 180,
      align: 'center',
      render: (text: string, record: IPro, index: number): React.ReactNode => {
        return (
          <Image width = { 100 } src = { text } />
        )
      }
    },
    {
      title: '产品分类',
      width: 150,
      align: 'center',
      dataIndex: 'category' // 产品对应的字段
    },
    {
      title: '产品品牌',
      width: 150,
      align: 'center',
      dataIndex: 'brand' // 产品对应的字段
    },
    {
      title: '产品原价',
      align: 'center',
      sorter (a: IPro, b: IPro) { return a.originprice - b.originprice },
      dataIndex: 'originprice'
    },
    {
      title: '折扣',
      align: 'center',
      sorter (a: IPro, b: IPro) { return a.discount - b.discount },
      dataIndex: 'discount'
    },
    {
      title: '销量',
      align: 'center',
      sorter (a: IPro, b: IPro) { return a.sales - b.sales },
      dataIndex: 'sales'
    },
    {
      title: '库存',
      align: 'center',
      sorter (a: IPro, b: IPro) { return a.stock - b.stock },
      dataIndex: 'stock'
    },
    {
      title: '是否售卖',
      fixed: 'right',
      width: 100,
      align: 'center',
      dataIndex: 'issale',
      render (text: number, record: IPro, index: number): React.ReactNode {
        return (
          <Switch className = "switch_sales" checked = { text === 1 } disabled/>
        )
      }
    },
    {
      title: '是否推荐',
      fixed: 'right',
      width: 100,
      align: 'center',
      dataIndex: 'isrecommend',
      render (text: number, record: IPro, index: number): React.ReactNode {
        return (
          <Switch className = "switch_recommend" checked = { text === 1 } onChange = { (checked) => {
            console.log(checked)
            const arr = JSON.parse(JSON.stringify(dataSource))
            updateFlag({
              proid: record.proid,
              type: 'isrecommend',
              flag: checked
            }).then(() => {
              // 前端操作，无需再走服务器
              arr[(current - 1) * pageSize + index].isrecommend = checked ? 1 : 0
              props.dispatch({
                type: 'pro/'+type,
                payload: arr
              })
            })
          }}/>
        )
      }
    },
    {
      title: '是否秒杀',
      fixed: 'right',
      width: 100,
      align: 'center',
      dataIndex: 'isseckill',
      render (text: number, record: IPro, index: number): React.ReactNode {
        return (
          <Switch className = "switch_seckill" checked = { text === 1 } onChange = { (checked) => {
            console.log(checked)
            const arr = JSON.parse(JSON.stringify(dataSource))
            updateFlag({
              proid: record.proid,
              type: 'isseckill',
              flag: checked
            }).then(() => {
              // 前端操作，无需再走服务器
              arr[(current - 1) * pageSize + index].isseckill = checked ? 1 : 0
              props.dispatch({
                type: 'pro/'+type,
                payload: arr
              })
            })
          }}/>
        )
      }
    },
    {
      title: '操作',
      fixed: 'right',
      width: 200,
      align: 'center',
      render: (text: any, record: IPro, index: number): React.ReactNode => {
        return (
          <Space>
             <Button type="primary">编辑</Button>
             <Button danger>删除</Button>
          </Space>
        )
      }
    },
  ];
  return (
    <Table
      dataSource={dataSource}
      columns={columns}
      rowKey = "proid"
      scroll={{ x: 1800, y: 700 }}
      pagination = { {
        total: dataSource.length,
        position: ['bottomLeft'],
        current,
        pageSize,
        showQuickJumper: true,
        hideOnSinglePage: true,
        pageSizeOptions: ['10', '30', '60', '100', '150'],
        onChange (page: number): void { // 页码变化
          setCurrent(page)
        },
        onShowSizeChange (current, size) { // 每页显示个数的变化
          setPageSize(size)
        },
        showTotal (total) {
          return '共' + total + '条数据'
        }
      } }
    />
  );
};

export default connect()(TableList);
